<template>
	<div
		ref="rootRef"
		:class="classes()"
		:tabindex="realDisabled?-1:0"
		@click="clickFn"
	>
		<slot
			v-if="loading"
			name="loading"
		>{{typeof loading==='string'?loading:lang.Button.loadingText}}<Spin
			:type="loadingType"
			class="pf-Button_spin"
		/></slot>
		<slot v-else/>
	</div>
</template>

<script setup lang="ts">
import type {
	ButtonType,
	ButtonShape,
} from './type';
import type {SpinType} from '../Spin/type';
import {computed,shallowRef} from 'vue';
import Spin from '../Spin/Spin';
import {lang} from '../../../locale';
/**
 * 按钮组件
 * @author 唐国雄
 * @date 2022/10/11
 * 属性----------------------
 * :type			类型
 * :shape			形状
 * :outline			线条模式
 * :disabled		禁用状态
 * :loading			加载状态
 * :loading-type	加载图标类型
 * 事件----------------------
 * @click			点击
 * 插槽----------------------
 * #default			默认内容
 * #loading			加载中内容
 */
const emit=defineEmits<{
	(e:'click'):void;
}>();
const props=withDefaults(defineProps<{
	type?:ButtonType;
	shape?:ButtonShape;
	outline?:boolean;
	disabled?:boolean;
	loading?:boolean|string;
	loadingType?:SpinType;
}>(),{
	type:'default',
});
const rootRef=shallowRef<HTMLElement>(null);
//region 禁用状态
const realDisabled=computed(() => {
	return props.disabled||props.loading;
});
//endregion
//region 类名
const classes=(() => {
	return `pf-Button pf--type-${props.type}`+
		(props.shape?` pf--shape-${props.shape}`:'')+
		(props.outline?' pf--mode-outline':' pf--mode-fill')+
		(realDisabled.value?' pf--disabled':' pf--enable');
});
//endregion
//region 点击事件
function clickFn(){
	if(realDisabled.value){
		return;
	}
	emit('click');
	rootRef.value.blur();
}
//endregion
</script>

<script lang="ts">
export default {};
</script>